/**
 * Created by 小敏哥 on 2018/1/12.
 */

import React, {Component} from 'react';
import {connect} from 'react-redux';
import ItemList from '../../../../../../../src/js/components/itemList';
import InputWithDelete from '../../../../../../../src/js/components/inputWithDelete'
import SimpleUpload from '../../../../../../../src/js/components/simpleUpload'
import {uploadFile, addCarRequirement,getUpdateRequirement} from '../../actions/addMessageAction';
import style from './index.scss';
import {Toast} from "antd-mobile";
import common from "../../../../../../js/utils/common";

class UpdateMessage extends Component {
    constructor(props) {
        super(props);
        this.renderData = {
            "CarOwnerLen": {
                "key": "CarOwnerLen",
                "display": "车主姓名",
                "value": "",
                "types": "text",
                "pattern": "^\\S+$",
                "maxlength": 16,
                "placeholder": "请输入车主姓名",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的车主姓名",
            },
            "CarCodeLen": {
                "key": "CarCodeLen",
                "display": "车身架号",
                "value": "",
                "types": "text",
                "maxlength": 99,
                "pattern": "^\\w+$",
                "placeholder": "请输入车身架号",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的车身架号",
            },
            "CarDriveLen": {
                "key": "CarDriveLen",
                "display": "发动机号",
                "value": "",
                "types": "text",
                "maxlength": 99,
                "placeholder": "请输入发动机号",
                "check": false,
                "pattern": "^\\w+$",
                "shouldCheck": false,
                "msg": "请输入正确的发动机号",
            },
            "DrivingLicense": {
                "key": "DrivingLicense",
                "display": "行驶证正页图片",
                "value": "",
                "types": "img",
                "check": false,
                "shouldCheck": false,
                "msg": "请选择图片",
            },//行驶证正页复印件图片的URL
            "DrivingSecondLicense": {
                "key": "DrivingSecondLicense",
                "display": "行驶证副页图片",
                "value": "",
                "types": "img",
                "check": false,
                "shouldCheck": false,
                "msg": "请选择图片",
            },//行驶证副页复印件图片的URL
            "MajorViolation": {
                "key": "MajorViolation",
                "display": "驾驶证正页图片",
                "value": "",
                "types": "img",
                "check": false,
                "shouldCheck": false,
                "msg": "请选择图片",
            },//驾驶证正页复印件图片的URL
            "MajorSecondViolation": {
                "key": "MajorSecondViolation",
                "display": "驾驶证副页图片",
                "value": "",
                "types": "img",
                "check": false,
                "shouldCheck": false,
                "msg": "请选择图片",
            }, //驾驶证副页复印件图片的URL
            "OwnerCardLen": {
                "key": "OwnerCardLen",
                "display": "车主身份证号",
                "value": "",
                "types": "idcard",
                "maxlength": 18,
                "placeholder": "请输入车主身份证号",
                "pattern": "(^\\d{14}(\\d|X|x)$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的身份证号",
            },
            "JashiZhengHaoLen": {
                "key": "JashiZhengHaoLen",
                "display": "驾驶证号",
                "value": "",
                "types": "idcard",
                "maxlength": 18,
                "placeholder": "请输入驾驶证号",
                "pattern": "(^\\d{14}(\\d|X|x)$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的驾驶证号",
            },
            "XingShiZhengHaoLen": {
                "key": "XingShiZhengHaoLen",
                "display": "行驶证档案编号",
                "value": "",
                "types": "text",
                "maxlength": 20,
                "placeholder": "请输入行驶证档案编号",
                "pattern": "^\\w+$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的行驶证档案编号",
            },
            "CheliangZhengShuLen": {
                "key": "CheliangZhengShuLen",
                "display": "车辆登记证书号",
                "value": "",
                "types": "text",
                "maxlength": 20,
                "placeholder": "请输入车辆登记证书号",
                "pattern": "^\\w+$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的车辆登记证书号",
            },
            "DanganBianHaoLen": {
                "key": "DanganBianHaoLen",
                "display": "驾驶证档案编号",
                "value": "",
                "types": "text",
                "maxlength": 12,//12
                "placeholder": "请输入驾驶证档案编号",
                "pattern": "^\\w+$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的驾驶证档案编号",
            },
            "CarOwnerPhoneLen": {
                "key": "CarOwnerPhoneLen",
                "display": "车主联系电话",
                "value": "",
                "types": "number",
                "maxlength": 11,
                "placeholder": "请输入车主联系电话",
                "pattern": "^1(3|4|5|7|8)\\d{9}$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的车主联系电话",
            },
            "TiaoXingMaLen": {
                "key": "TiaoXingMaLen",
                "display": "驾驶证条形码",
                "value": "",
                "types": "text",
                "maxlength": 20,
                "placeholder": "请输入驾驶证条形码",
                "pattern": "^\\w+$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的驾驶证条形码",
            },
            "VerifyCodeLen": {
                "key": "VerifyCodeLen",
                "display": "验证码",
                "value": "number",
                "maxlength": 6,
                "placeholder": "请输入验证码",
                "pattern": "^\\w+$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的验证码",
            },
            "FilePhoneLen": {
                "key": "FilePhoneLen",
                "display": "登记电话",
                "value": "",
                "types": "number",
                "maxlength": 11,
                "placeholder": "请输入驾驶证登记电话",
                "pattern": "^1\\d{10}$",
                "check": false,
                "shouldCheck": false,
                "msg": "请输入正确的驾驶证登记电话",
            }
        };
        this.state = {
            needList: []
        }
    }

    componentDidMount() {
        common.setViewTitle('修改资料');
        this.props.dispatch(getUpdateRequirement({
            carId: this.props.params.carId,
        }, (result) => {
            let list = [];
            for (let index in result) {
                if (result[index]) {
                    list.push({key:index,value:result[index]});
                    this.setValue(index, result[index], true)
                }
            }
            this.setState({
                needList: list,
            })
        }))
    }

    //设置输入框的值
    setValue(valueType, value, check) {
        this.renderData[valueType].value = value;
        this.renderData[valueType].check = check;
    }

    //检查所有数据
    checkAllData() {
        for (let index in this.renderData) {
            if (this.renderData[index].shouldCheck && !this.renderData[index].check) {
                Toast.info(this.renderData[index].msg, 2);
                return false;
            }
        }
        return true;
    }

    submit() {
        setTimeout(() => {
            if (this.checkAllData()) {
                let postData = {};
                for (var item in this.renderData) {
                    if (this.renderData[item].shouldCheck) {
                        postData[this.renderData[item].key] = this.renderData[item].value;
                    }
                }
                let data = {
                    propertyJson: JSON.stringify(postData),
                    carId: this.props.params.carId
                };
                this.props.dispatch(addCarRequirement(data, (result) => {
                    Toast.info('修改资料成功', 2);
                    setTimeout(() => {
                        history.back();
                    }, 2000)
                }))
            }
        }, 0);
    }

    renderInputList(list) {
        return list.map((item, index) => {
            this.renderData[item.key].shouldCheck = true;
            if (this.renderData[item.key].types != "img") {
                return <InputWithDelete key={item.key} type={this.renderData[item.key].types} initValue={item.value}
                                        title={this.renderData[item.key].display}
                                        maxLength={this.renderData[item.key].maxlength && this.renderData[item.key].maxlength != 99 ? this.renderData[item.key].maxlength : undefined}
                                        placeholder={this.renderData[item.key].placeholder} titleWidth="2.5rem"
                                        regular={this.renderData[item.key].pattern} currentCallBack={(result) => {
                    this.setValue(item.key, result, true);
                }
                } errorCallBack={(result) => {
                    this.setValue(item.key, result, false);
                }}/>
            }
            else {
                return <SimpleUpload key={item.key} title={this.renderData[item.key].display} titleWidth="2.5rem" initImg={item.value}
                                     fileChange={(val) => {
                                         this.props.dispatch(uploadFile(val, (result) => {
                                             this.setValue(item.key, result.imageUrl, true);
                                         }))
                                         //this.renderData[item].value=val;
                                     }}/>
            }
        })
    }

    render() {
        return <div className={style.updateMessage}>
            <ItemList borderPaddingLeft="0.3rem">
                {this.renderInputList(this.state.needList)}
            </ItemList>

            <button className={style.save} onClick={() => {
                this.submit()
            }}>保存并提交
            </button>

            <div className={style.tips}><img src=""/><span>请确保填写车主本人的驾照信息，否则将无法办理。</span></div>
            <img className={style.tipsImg} src="./images/index-bottom.png"/>
        </div>;
    }
}


//使用context
UpdateMessage.contextTypes = {
    router: React.PropTypes.object.isRequired
};


function mapStateToProps(state) {
    return Object.assign({}, state.addMessageInfo);
}

export default connect(mapStateToProps)(UpdateMessage)